<template>
  <div class="file">
    <TitleBar title="文档管理" refresh />
    <!--    <div class="query">-->
    <!--      <el-input-->
    <!--        v-model="query"-->
    <!--        placeholder="请输入你要查询的内容"-->
    <!--        prefix-icon="el-icon-search"-->
    <!--      />-->
    <!--      <div class="query-sure">查询</div>-->
    <!--    </div>-->
    <div class="input-box">
      <div>
        <p>员工账号：</p>
        <el-input v-model="account" clearable @change="selTime" />
      </div>
      <div>
        <p>文档摘要：</p>
        <el-input v-model="abstract" clearable @change="selTime" />
      </div>
      <div>
        <p>文档状态：</p>
        <el-select v-model="value" placeholder="全部" clearable @change="selTime">
          <el-option
            v-for="item in fileState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <p>发布时间：</p>
        <el-date-picker
          v-model="releaseTime"
          class="release-time"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          clearable
          @change="selTime"
        />
      </div>
      <div style="text-align: center;">
        <div class="screenBut" @click="screenButton">筛选</div>
      </div>
    </div>
    <div class="data-lie">
      <h1>数据列表</h1>
      <div class="select-box">
        <div style="cursor: pointer" @click="linkAddTo">添加文档</div>
        <!--        <div>-->
        <!--          <el-select v-model="value" placeholder="导入文档">-->
        <!--            <el-option-->
        <!--              v-for="item in mailSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select v-model="value" placeholder="导出文档">-->
        <!--            <el-option-->
        <!--              v-for="item in pushSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select v-model="value" placeholder="显示条数">-->
        <!--            <el-option-->
        <!--              v-for="item in labelSelect"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
        <!--        <div>-->
        <!--          <el-select v-model="value" placeholder="排序方式">-->
        <!--            <el-option-->
        <!--              v-for="item in exportData"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </div>-->
      </div>
      <div class="edge" />
      <template>
        <el-table
          ref="multipleTable"
          class="table-class"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column align="center" label="用户ID" prop="id" />
          <el-table-column align="center" prop="documentName" label="文档名称" />
          <el-table-column
            align="center"
            prop="editorDepartmentCode"
            label="部门"
            show-overflow-tooltip
          />
          <el-table-column align="center" prop="editor" label="用户名" show-overflow-tooltip />
          <el-table-column
            align="center"
            prop="documentAbstract"
            label="文档摘要"
            show-overflow-tooltip
          />
          <el-table-column align="center" prop="approveState" label="文档审核状态" show-overflow-tooltip />
          <!--          <el-table-column-->
          <!--            align="center"-->
          <!--            prop="approver"-->
          <!--            label="文档审批人"-->
          <!--          >-->
          <!--            <div slot-scope="scope">{{ approver }}</div>-->
          <!--          </el-table-column>-->
          <el-table-column prop="editor" label="文档发布人" align="center" show-overflow-tooltip />
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="linkSeeContent(scope.row)">审批</el-button>
              </div>
              <div>
                <el-button type="text" @click="linkEdit(scope.row)">编辑</el-button>
              </div>
              <div>
                <el-button type="text" @click="linkRelease(scope.row)">发布</el-button>
              </div>
              <div>
                <el-button type="text" style="color: rgba(245,108,108,1);" @click="deleteFile(scope.row.documentType)">作废</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--      分页内容-->
      <div class="pagination-block">
        <div class="del-button" @click="delAll(multipleSelection)">批量删除</div>
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          layout="prev, pager, next,total,slot, jumper"
          :total="totalNum"
          @current-change="currentPageNum"
        >
          <div class="page-number" layout="slot">
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
    </div>
    <div class="messageBox">
      <el-dialog center :visible.sync="dialogFormVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">发布信息详情</p>
        </div>
        <el-form :model="form">
          <el-form-item label="发布内容摘要：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" :disabled="true" />
          </el-form-item>
          <el-form-item label="发布类型：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" :disabled="true" />
          </el-form-item>
          <el-form-item label="发布行业：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" :disabled="true" />
          </el-form-item>
          <el-form-item label="发布地区:" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" :disabled="true" />
          </el-form-item>
          <el-form-item label="发布分类：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" :disabled="true" />
          </el-form-item>
          <el-form-item label="发布内容：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" :disabled="true" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog center :visible.sync="dialogTableVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">发布信息详情</p>
        </div>
        <el-form :model="form">
          <el-form-item label="发布内容摘要：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布类型：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布行业：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布地区:" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布分类：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布内容：" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getFileData,
  fileApproval,
  delAllFile,
  delFile,
  screenFile
} from "@/api/operate.js";
export default {
  inject: ["reload"],
  data() {
    return {
      // 审批人内容
      approver: "",
      // 搜索框
      query: "",
      // 输入框
      //   用户账号
      account: "",
      //   信息内容摘要
      abstract: "",
      // 发布时间
      releaseTime: "",
      // 默认筛选选项
      lately: "不限",
      frequency: "不限",
      money: "不限",
      level: "不限",
      userLabel: "不限",
      value: "",
      // 文档状态选择器
      fileState: [
        {
          value: 0,
          label: "未通过"
        },
        {
          value: 1,
          label: "已通过"
        }
      ],
      // 选择器
      messageSelect: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      mailSelect: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      pushSelect: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      labelSelect: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      exportData: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      showNumber: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      sortSelect: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      // 表格列表
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      totalNum: 0,
      pageSize: 6,
      // 弹出窗口
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 弹出窗口一
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
      // 弹出窗口二
    };
  },
  created() {
    this.getListData(this.currentPage, this.pageSize);
  },
  methods: {
    // 删除
    deleteFile(code) {
      this.$confirm("确认作废该数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.multipleSelection.push(code)
        delAllFile(this.multipleSelection).then(res => {
          this.multipleSelection = []
          this.getListData(this.currentPage, this.pageSize);
        })
      })
    },
    handleSelectionChange(val) {
      console.log(val);
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].documentType);
      }
      console.log(this.multipleSelection);
    },
    // 批量删除
    delAll(val) {
      this.$confirm("确认批量删除该数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delAllFile(this.multipleSelection).then(res => {
          this.multipleSelection = []
          this.getListData(this.currentPage, this.pageSize);
        });
      });
    },
    currentPageNum(val) {
      this.getListData(val, 6);
    },
    selVal() {
      console.log(this.value);
    },
    // 获取数据
    getListData(num, size) {
      getFileData({
        pageNum: num,
        pageSize: size
      }).then(res => {
        console.log(res);
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].approveState === "1") {
            res.data.list[i].approveState = "通过";
          } else {
            res.data.list[i].approveState = "未通过";
          }
        }
        this.tableData = res.data.list;
        this.totalNum = res.data.total;
      });
    },

    linkAddTo() {
      this.$router.push("operate_4/addTo");
    },
    linkRelease(data) {
      this.$router.push({
        name: "release",
        query: {
          data
        }
      });
    },
    linkEdit(data) {
      this.$router.push({
        name: "edit",
        query: {
          data
        }
      });
    },
    linkSeeContent(data) {
      this.$router.push({
        name: "seeContent",
        query: {
          data
        }
      });
    },
    // 筛选返回数据
    screenButton() {
        console.log(this.value,89898)
      if(this.account!=''|| this.abstract!=''||this.releaseTime!=''|| this.value!==''){
        screenFile({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        documentCode: this.account,
        documentAbstract: this.abstract,
        createTime: this.releaseTime,
        approveState: this.value
      }).then(res => {
        // console.log(res,'筛选返回内容')
        for (let i = 0; i < res.data.list.length; i++) {
          // 判断发布信息类型
          if (res.data.list[i].messageType === "d") {
            res.data.list[i].messageType = "需求";
          }
          if (res.data.list[i].messageType === "r") {
            res.data.list[i].messageType = "资源";
          }
          if (res.data.list[i].messageType === "s") {
            res.data.list[i].messageType = "服务";
          }
          // 判断信息发布状态
          if (res.data.list[i].approveState === "1") {
            res.data.list[i].approveState = "通过";
          } else {
            res.data.list[i].approveState = "未通过";
          }
        }
        this.tableData = res.data.list;
        this.totalNum = res.data.total;
        // this.pageSize = 6
        // this.getListData()
      })
      }else{
        this.$message({
          message: '至少填写一项！',
          type: 'warning'
        });
      }

    },
    selTime() {
      if (!this.account && !this.abstract && !this.releaseTime && !this.value) {
        this.getListData(this.currentPage, this.pageSize);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.file {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 30px 0 30px;
  margin: 16px 0;
}
.screenBut {
  height: 40px;
  background: #488dff;
  width: 100px;
  border-radius: 4px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: white !important;
  cursor: pointer;
  padding-left: 34px;
}
.title {
  width: 100%;
  height: 37px;
  display: flex;
  flex-flow: nowrap row;
  margin: 16px 0;
  justify-content: space-between;
}
.title-left {
  height: 37px;
  display: flex;
  align-items: center;
  float: left;
}
.title-left > div {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
}
.title-left > p {
  margin-left: 14px;
}
.query {
  margin-bottom: 32px;
  width: 100%;
  display: flex;
  align-items: center;
}
.query-sure {
  width: 106px;
  height: 40px;
  background: rgba(72, 141, 255, 1);
  margin-left: 30px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.input-box {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 104px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.screen {
  width: 100%;
  height: 240px;
  display: flex;
  margin: 50px 0;
  justify-content: space-between;
  flex-direction: column;
}
.screen > div {
  width: 100%;
  height: 32px;
}
.screen > div > p:nth-of-type(1) {
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  margin-left: 25px;
  color: rgba(0, 51, 51, 1);
  display: inline-block;
}
.data-lie {
  position: relative;
  width: 100%;
  /*height: 913px;*/
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 26px 20px 50px 24px;
  margin-bottom: 120px;
  margin-top: 50px;
}
.data-lie > h1 {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.select-box {
  margin: 26px 0;
  width: 100%;
  height: 40px;
  display: flex;
  flex-flow: row nowrap;
}
.select-box > div {
  width: 116px;
  height: 40px;
  border-radius: 2px;
  margin-right: 40px;
}
.select-box > div:nth-of-type(1) {
  background: rgba(72, 141, 255, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 40px;
}
.edge {
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background: rgba(241, 241, 241, 1);
}
</style>

